<!--
 * @Author: RAY_HUI 1541917867@qq.com
 * @Date: 2025-07-09 09:02:49
 * @LastEditors: RAY_HUI 1541917867@qq.com
 * @LastEditTime: 2025-07-30 21:05:03
 * @FilePath: \website-reconstruction---vue\src\components\sections\contact\ContactTop.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { ContactInfo } from '@/types/selfdefine/Layout'
import { getRandomAnimation } from '@/utils/tools/tools'
onMounted(() => {
 // console.log(props.data)
})
const props = defineProps<{ data: ContactInfo[] }>()
// 联系信息数据
const contactItems = ref<ContactInfo[]>([])
</script>

<template>
  <section class="section-padding bg-light-white contact-top">
    <div class="container">
      <div class="row">
        <!-- 动态渲染联系信息 -->
        <div
          v-for="(item, index) in props.data"
          :key="index"
          :class="`col-lg-4 col-sm-6 d-flex align-items-center justify-content-center wow ${getRandomAnimation()}`"
        >
          <div class="contact-info-box">
            <i :class="item.icon"></i>
            <div class="info-text-wrapper text-theme fw-600">
              <!-- 循环渲染内容 -->
              <div v-for="(line, idx) in item.content" :key="idx">
                {{ line }}
              </div>
              <!-- 提示语 -->
              <p class="info-tip d-bloc">（{{ item.tip }}）</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<style></style>
